<template>
	<div class="naddress">
		<ul class="naddress-list1">
			<li><input type="text" name="" id="" value="" placeholder="请输入收货人姓名" v-model="addressName"/></li>
			<li><span>+86</span><input type="number" name="" id="phonepd" value="" placeholder="请输入联系方式" v-model="addressTel"/></li>
		</ul>
		<ul class="naddress-list2">
			<li>
				<mt-cell title="地址" :value="addressv" @click.native="showPicker"></mt-cell>
			    <my-addressx :showAddressPicker="showAddressPicker" @save-address="saveAddress" @hide-picker="hidePicker" :init="addressv">
			    </my-addressx>
			    <img src="../img-shopXq/icon_next@3x.png"/>
			</li>
			<li>
				<textarea id="xxxxx" name="" rows="3" cols="" placeholder="请输入详细地址" v-model="addressXxads"></textarea>
			</li>
		</ul>
		<div class="naddress-mrsz" :class="{'active':addressMoren==1}" @click="bealmr()"><img src="../img-address/icon_dis@3x.png"/><img src="../img-address/icon_select @3x.png"/>设为默认值</div>
		<button class="naddressbc" @click="naddressdzbc()">保存</button>
		<div class="tsbox" v-show="iphonefalse">
			<div class="iphone-xinxi">
				<i @click="gbiphone()"><img src="../img-shopXq/guanbi@3x.png"/></i>
				<span>请输入正确手机号</span>
			</div>
		</div>
	</div>
	
</template>

<script>
	import MyAddressx from './address-picker/Addressx.vue'
	
	var furl = 'http://www.ntyouxuan.com/';
  export default {
    name: 'nAddress',
    components: {
      MyAddressx
    },
    data() {
      return {
        showAddressPicker: false,
        addressv: '',
        nadsmrtrue: false,
        userAddressid:'',
        user:'',
        iphonefalse:false,
        addressName:"",
        addressTel:"",
        addressAds:[],
        addressXxads:"",
        addressMoren:0
      }
    },
    created:function(){
    	var self=this;
    	this.userAddressid=this.$route.params.id;
    	this.user=localStorage.getItem("nt_user");
    	if(this.userAddressid==0){
    		console.log("新添加");
    	}else{
    		$.ajax({                                                                                                                                                                                                                                                                                                                          
    			type:"post",
    			url:furl+"index.php?app=ajax&act=edit_show",
    			data:{"token":self.user,"addr_id":self.userAddressid},
    			dataType:"json",
    			success:function(res){
    				console.log(res);
    				self.addressName=res.retval.address.consignee;
    				self.addressTel=res.retval.address.phone_mob;
    				self.addressAds=res.retval.address.region_name.replace(/(^\s*)|(\s*$)/g, "").replace(/\s+/g,' ').split(" ");
    				if(self.addressAds[0]=="中国"){
    					self.addressv=self.addressAds[1]+'-'+self.addressAds[2]+'-'+self.addressAds[3];
    				}else{
    					self.addressv=self.addressAds[0]+'-'+self.addressAds[1]+'-'+self.addressAds[2];
    				}
    				self.addressXxads=res.retval.address.address;
    				self.addressMoren=res.retval.address.is_default;
    			}
    		});
    	}
    },
    methods: {
      hidePicker() {
        // 接受子组件关闭popup事件
        this.showAddressPicker = false
      },
      showPicker() {
        this.showAddressPicker = !this.showAddressPicker
        $("mt-picker").css("display","none")
      },
      saveAddress(val) {
        // 从子组件接受返回所选值 val
        this.addressv = val
        this.showAddressPicker = !this.showAddressPicker
      },
      bealmr(){
      	this.nadsmrtrue=!this.nadsmrtrue;
      	if(this.nadsmrtrue){
      		this.addressMoren=1;
      	}else{
      		this.addressMoren=0;
      	}
      },
      gbiphone(){
      	this.iphonefalse=false;
      },
      naddressdzbc(){
      	var addressA=this.addressv.split("-");
      	var self=this;
      	$.ajax({
      		type:"post",
      		url:furl+"index.php?app=ajax&act=addr_form",
      		data:{"token":self.user,"addr_id":self.userAddressid,"region_name":addressA,"address":self.addressXxads,"phone_mob":self.addressTel,"consignee":self.addressName,"is_default":self.addressMoren},
      		dataType:"json",
      		success:function(res){
      			history.go(-1);
      			
      		}
      	});
      	var ipt = $("#phonepd").val()
		var len = ipt.length
		if (len!=11){
			layer.open({
				content:'手机号输入错误',
				skin:'msg',
				time:2
			});
			return false;
		}

		var iptt = $("#xxxxx").val()
		if (iptt == ''){
			layer.open({
				content:'请填写详细地址',
				skin:'msg',
				time:2
			});
			return false;
		}
		var ipttt = this.addressv;
		if (ipttt == ''){
			layer.open({
				content:'请选择地址',
				skin:'msg',
				time:2
			});
			return false;
		}
		
		
      }
    }

  }
</script>

<style>
	.naddress{
		font-size:0;
	}
	.naddress-list1{
		background-color:#fff;
		margin-bottom: 0.16rem;
		padding-left:0.32rem;
		padding-right: 0.32rem;
		padding-top:0.2rem;
		padding-bottom: 0.1rem;
	}
	.naddress-list1 li input{
		font-size:0.32rem;
		color:#2b2b2b;
		height:0.82rem;
		width:100%;
	}
	.naddress-list1 li:first-child{
		border-bottom: 1px solid #eee;
	}
	.naddress-list1 li:nth-child(2) input{
		padding-left: 0.32rem;
		width:80%;
	}
	.naddress-list1 li span{
		font-size:0.34rem;
		color:#fb9722;
		padding-right: 0.32rem;
		border-right:1px solid #eee;
		font-weight:600;
	}
	.naddress .mint-cell-wrapper{
		padding-left: 0rem;
		padding-right: 0rem;
		height:100%;
	}
	.mint-cell{
		height:100%;
	}
	.naddress .mint-cell-text{
		font-size:0.32rem;
		color:#2b2b2b;
	}
	.mint-cell-value span{
		margin-right: 0.42rem;
		color:#999;
		font-size:0.22rem;
		width:5.28rem;
		line-height: 0.26rem;
		text-align: right;
	}
	.naddress-list2{
		padding-left:0.32rem;
		padding-right:0.32rem;
		background-color:#fff;
		margin-top: -0.18rem;
		
	}
	.naddress-list2 li:first-child{
		border-top: 1px solid #eee;
		position:relative;
		border-bottom: 1px solid #eee;
		height:1rem;
	}
	.naddress-list2 li:first-child>img{
		width:0.1rem;
		height:0.18rem;
		position:absolute;
		top:50%;
		right:0;
		margin-top: -0.09rem;
	}
	.naddress-list2 li:nth-child(2){
		padding-top: 0.32rem;
		padding-bottom: 0.32rem;
	}
	.naddress-list2 li:nth-child(2) textarea{
		font-size:0.32rem;
		color:#2b2b2b;
		line-height: 0.4rem;
		width:100%;
	}
	.naddress-mrsz{
		padding:0.32rem;
	}
	.naddress-mrsz img{
		width:0.32rem;
		height:0.32rem;
		float:left;
		margin-top: 0.06rem;
		margin-right: 0.24rem;
	}
	.naddress-mrsz img:nth-child(2){
		display: none;
	}
	.naddress-mrsz.active img:nth-child(1){
		display: none;
	}
	.naddress-mrsz.active img:nth-child(2){
		display: inline-block;
	}
	.naddress-mrsz{font-size:0.32rem;color:#999;}
	.naddress-mrsz.active {
		color:#fb9722;
	}
	.naddressbc{
		display: block;
		background: -webkit-linear-gradient(left, #fb9722 , #ffb661); 
		background: -o-linear-gradient(right, #fb9722, #ffb661); 
		background: -moz-linear-gradient(right, #fb9722, #ffb661);
		background: linear-gradient(to right, #fb9722 , #ffb661);
		color:#fff;
		width:6.86rem;
		height:1rem;
		border-radius:0.5rem;
		font-size:0.36rem;
		letter-spacing:0.8rem;
		text-align: center;
		margin:0.68rem auto 0;
		box-sizing: border-box;
		padding-left: 0.8rem;
	}
	.tsbox{
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background-color:rgba(0,0,0,.4);
	}
	.iphone-xinxi{
		width:5.9rem;
		height:1.26rem;
		position:absolute;
		top:50%;
		left:50%;
		margin-top:-0.63rem;
		margin-left: -2.95rem;
		background-color:#fff;
		text-align: center;
		line-height: 1.26rem;
	}
	.iphone-xinxi i{
		position:absolute;
		top:-0.3rem;
		right:0.32rem;
		display: inline-block;
		width:0.6rem;
		height:0.6rem;
		border-radius:50%;
		line-height: 0;
		background-color:#fff;
	}
	.iphone-xinxi img{
		width:0.6rem;
		height:0.6rem;
	}
	.iphone-xinxi span{
		font-size:0.34rem;
		color:#2b2b2b;
	}
	.picker-slot{
		font-size:0.4rem !important;
	}
</style>